<template>
  <div class="hello">
    <div class="excellent-courses">
      <div style="margin-right:0.3867rem;" class="courses-card">
        <div :style="`background-image:url(${teacherArr.coursePhoto || require('@/assets/homePicture/06.png')});`" class="img-box">
          <!-- <img src="@/assets/homePicture/banner1.png" alt /> -->
        </div>
        <div class="courses-tip">
          <div style="overflow:hidden;">
            {{goodCourseList.title}}
          </div>
        </div>
        <div class="user-msg flex-row">
          <p style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></p>
          <p>{{teacherArr.username}} · {{teacherArr.deptName || '外部导师'}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props:['goodCourseList','teacherArr'],
  data() {
    return {};
  },

  methods: {}
};
</script>
<style lang="less">
@import url('~@/pagecss/public.less');
.excellent-courses {
  .courses-card {
    flex: 1 1 auto;
    width: 100%;
    box-shadow: 0px 3px 7px 0px rgba(153, 153, 153, 0.59);
    border-radius: 20/75rem 20/75rem 0 0;
    .img-box {
      height: 145/75rem;
      border-radius: 5px 5px 0 0;
      img {
        border-radius: 20/75rem 20/75rem 0 0;
      }
      background-position: 50% 50%;
      background-size: cover;
    }
    .courses-tip {
      padding: 15/75rem 12/75rem;
      min-height: 47px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .user-msg {
      padding: 0 0 12/75rem 15/75rem;
    }
  }
}
</style>
